import React from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import styles from './index.module.less'; // 导入CSS模块
import logo from '../../assets/logo@2x.png'
import logo2 from '../../assets/logo2@2x.png'

function Header() {
    const location = useLocation();
    let headerStyle = location.pathname === '/web/doctor-service' || location.pathname === '/web/doctor-group'  
    return (
        <header className={`${styles.header} ${headerStyle && styles.header2}`}>
            <div className={styles.logo}>
                <img src={headerStyle ? logo2 : logo} />
            </div>
            <ul className={styles.menu}>
                <li className={styles.menuItem}>
                    {/* <Link
                        className={`${styles.link} ${location.pathname === '/' ? styles.activeLink : ''}`} to="/">
                        首页
                    </Link> */}
                    <NavLink className={({ isActive}) => `${styles.link} ${isActive ? styles.activeLink : ''}`} to="/web/index" end>
                        首页
                    </NavLink>
                </li>
                <li className={styles.menuItem}>
                    {/* <Link
                        className={`${styles.link} ${location.pathname === '/doctor-service' ? styles.activeLink : ''}`} to="/doctor-service">
                        医生服务
                    </Link> */}
                    <NavLink className={({ isActive}) => `${styles.link} ${isActive ? styles.activeLink : ''}`} to="/web/doctor-service" end>
                        医生服务
                    </NavLink>
                </li>
                <li className={styles.menuItem}>
                    {/* <Link
                        className={`${styles.link} ${location.pathname === '/doctor-group' ? styles.activeLink : ''}`} to="/doctor-group">
                        医生集团
                    </Link> */}
                    <NavLink className={({ isActive}) => `${styles.link} ${isActive ? styles.activeLink : ''}`} to="/web/doctor-group" end>
                        医生集团
                    </NavLink>
                </li>
                <li className={styles.menuItem}>
                    {/* <Link
                        className={`${styles.link} ${location.pathname === '/digital-marketing' ? styles.activeLink : ''}`} to="/digital-marketing">
                        数字化营销
                    </Link> */}
                    <NavLink className={({ isActive}) => `${styles.link} ${isActive ? styles.activeLink : ''}`} to="/web/digital-marketing" end>
                    数字化营销
                    </NavLink>
                </li>
                <li className={styles.menuItem}>
                    {/* <Link
                        className={`${styles.link} ${location.pathname === '/about' ? styles.activeLink : ''}`} to="/about">
                        关于良医健康
                    </Link> */}
                    <NavLink className={({ isActive}) => `${styles.link} ${isActive ? styles.activeLink : ''}`} to="/web/about" end>
                    关于良医健康
                    </NavLink>
                </li>
            </ul>
        </header>
    );
}

export default Header;
